

import { useState } from "react"
import home from '../Home.module.less'




export default function JobDescription({tags,requireDescription}){

    const highLight = {
        border:'solid rgb(240, 220, 220) 2px',
        color: 'white',
        backgroundColor: '#f87063',
    }

    const defaultLight = {
        border:'solid gray 2px'
    }

    const [selectedId,setSelectedId] = useState([])


    const checkOrUncheck=(id)=>{
        let result = selectedId.find(item=>{return item ===id})
        if(result){
            let list = selectedId.filter(item=>item !== id)
            setSelectedId([...list])
        }else{
            setSelectedId([...selectedId,id])
        }
    }

    
    return(
        <div className={home.jobDescription}> 
            <div className={home.title}>岗位jd  <span title="请在【jd管理】页添加相关标签配置和对应标签下的岗位需求描述">❓ </span> </div>

            <ul className={home.tags}>
                {
                    tags.map(item=>{
                        return (
                            <li key={item.id}
                                style={ selectedId.includes(item.id) ? highLight : defaultLight} 
                                onClick={()=>checkOrUncheck(item.id)}>
                                {item.name}
                            </li>
                        )
                    })
                }
            
            </ul>
            <ul className={home.requireDescription}>
                {
                    requireDescription.map(item=>{
                        return(
                            selectedId
                            .map(item1=>{return item.tags.includes(item1) ? item1 : ''})
                            .filter(item=>item!=='')?.length  === selectedId.length 
                            &&  <li key={item.id}>
                                {item.content}</li>
                        ) 
                    })
                }
            </ul>
        </div>
    )

    
}
